<div class="workflow-transition">

  <div class="modal-header">
    <h4 class="modal-title">状态转换</h4>
    <button type="button" class="close" aria-label="Close" (click)="close()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">

    <form [formGroup]="form" class="my-validate-form">
      <div class="form-group row">
        <label class="col-sm-1 col-form-label"><span>动作名称</span></label>
        <div class="col-sm-5">
          <input workflow="text" class="form-control" name="name" formControlName="name"
                 [(ngModel)]="model.name" #name>
        </div>

        <label class="col-sm-1 col-form-label">界面</label>
        <div class="col-sm-5">
          <select [(ngModel)]="model.actionPageId" formControlName="actionPageId" class="form-control" name="actionPageId">
            <option value=""></option>
            <option *ngFor="let entry of pages" value="{{entry.id}}">
              <span>{{entry.name}}</span>
            </option>
          </select>
        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-1 col-form-label">状态转换</label>
        <div class="col-sm-5 col-form-label no-span">
          <span *ngIf="model.srcStatusName">
            <span [outerHTML]="model.srcStatusName | term"></span>
            <span>至</span>
            <span [outerHTML]="model.dictStatusName | term"></span>
          </span>
        </div>
      </div>
    </form>

    <div class="my-validate-form">
      <div class="form-group row">
        <label class="col-sm-1 col-form-label"><span>项目角色</span></label>
        <div class="col-sm-11">
          <div class="checkbox-list">
            <div class="checkbox-list-inner">
              <div class="toolbar">
                <div class="toolbar-inner">
                  <span (click)="select('all')" class="link">全选</span> |
                  <span (click)="select('none')" class="link">全不选</span>
                </div>
              </div>
              <div>
                <div *ngFor="let item of projectRoles" class="checkbox-list-item">
                  <label>
                    <span class="checkbox-name">{{item.name}}<span></span></span>
                    <input type="checkbox" class="form-check-input"
                           [(ngModel)]="item.selected">
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="modal-footer">
      <button [disabled]="!form.valid" type="button" class="btn btn-primary" (click)="save()">保存</button>
      <button type="button" class="btn btn-default" (click)="dismiss()">取消</button>
    </div>

  </div>

</div>
